<template>
  <div class="findex">
    <!-- :routes="routes" -->
    <a-breadcrumb style="color:white">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>系统列表</a-breadcrumb-item>
      <a-breadcrumb-item style="color:aquamarine">数据展示平台</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="swiper1">
      <Swiper1></Swiper1>
    </div>
    <a-row>
      <a-col :span=isA>
        <!-- <a-card hoverable style="width: 100%;marginTop:20px;">
          <img id="test0413" style="margin: 20px 0" slot="cover" alt="example" src="../assets/image/userindex.png" />
          <template slot="actions">
          </template>
          <a-card-meta :title="userName" description="This is the description">
            <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          </a-card-meta>
        </a-card> -->
      </a-col>
      <a-col :span=isB>
        <a-card style="width: 100%;" :bordered="false">
          统计数据
          <a-button type='link' @click="updatesysstate()">
            更新
          </a-button>
          <div>
            <!-- 第一行 快 -->
            <a-row>
              <a-col :span="12" style="padding:10px">
                <a-card-grid style="width:100%; textAlign: center; backgroundColor: #8ED1CF;" class="subcard"
                  bordered="false" hoverable>
                  <div style="marginTop:25px;marginLeft:13px">
                    <Statistic :valuex="valuex1"></Statistic>
                  </div>
                </a-card-grid>
              </a-col>
              <!-- malloc次数增加的比例 -->
              <a-col :span="12" style="padding:10px">
                <a-card-grid style="width:100%; textAlign: center; backgroundColor: #EA8015;" class="subcard"
                  bordered="false" hoverable>
                  <Statistic2 :valuex="valuex2" :title="title2" style="marginTop: 25px"></Statistic2>
                </a-card-grid>
              </a-col>
            </a-row>
            <!-- 第二行 块 -->
            <a-row>
              <a-col :span="12" style="padding:10px">
                <a-card-grid style="width: 100%; textAlign: center; backgroundColor: #FFF8DC;" class="subcard"
                  bordered="false" hoverable>
                  <!-- 节点数量 -->
                  <Statistic4 :valuex="valuex3" :title="title3" style="marginTop: 25px;"></Statistic4>
                </a-card-grid>
              </a-col>
              <!-- 协程数量 -->
              <a-col :span="12" style="padding:10px">
                <a-card-grid style="width: 100%; textAlign: center; backgroundColor: #67a9db;" class="subcard"
                  bordered="false" hoverable>
                  <Statistic3 :valuex="valuex4" style="marginLeft:13px;marginTop:15px"></Statistic3>
                </a-card-grid>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <!-- <a-col :span=isC>
        <div style="background:#ECECEC;margin:20px 20px; padding:20px; float:right;">
          <a-card title="功能" v-show="isProject" :bordered="false" style="width: 100%;">
            <p>
              <a-timeline>
                <a-timeline-item>本页可查询系统的动态内存分配状态、服务增量和协程的使用数量</a-timeline-item>
                <a-timeline-item>在操作平台上传日志等信息，完成链上存储。</a-timeline-item>
                <a-timeline-item color="red">
                  <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
                  完成日志上链操作，查询日志信息，完成可追溯和日志还原功能。
                </a-timeline-item>
                <a-timeline-item>展示区块链的防篡改功能。</a-timeline-item>
              </a-timeline>
            </p>
          </a-card>
        </div>
      </a-col> -->
    </a-row>
  </div>
</template>
<script>
  import Statistic from '@/components/statistic/statistic.vue';
  import Statistic2 from '../components/statistic/statistic2.vue';
  import Statistic3 from '../components/statistic/statistic3.vue';
  import Statistic4 from '../components/statistic/statistic4.vue';
  import Swiper1 from "../components/swiperplat.vue"
  import axios from 'axios'
  export default {
    components: {
      Statistic,
      Statistic2,
      Statistic3,
      Statistic4,
      Swiper1,
    },
    data() {
      return {
        visible: false,
        pStyle: {
          fontSize: '16px',
          color: 'rgba(0,0,0,0.85)',
          lineHeight: '24px',
          display: 'block',
          marginBottom: '16px',
        },
        pStyle2: {
          marginBottom: '24px',
        },
        //四个小窗口数据
        valuex1: [0, 0],
        mallocinit: 169426,
        valuex2: 0,
        serveinit: 72696064,
        valuex3: 0,
        valuex4: 0,
        title2: '进程使用数量',
        title3: '链接数量',
        // 浏览器窗口 宽高
        screenWidth: '',
        screenHeight: '',
        //决定项目进度是否显示
        isProject: true,
        //span
        isA: 5,
        isB: 12,
        isC: 7,
        //原message
        percent: 35,
        isA1: 10,
        isB1: 14,
        userName: this.$store.state.userId,
      }
    },
    mounted() {
      this.screenWidth = document.body.clientWidth;
      this.screenHeight = document.body.clientHeight;
      window.onresize = () => {
        if (this.screenWidth <= 1400) {
          this.isProject = false;
          this.isA = 11;
          this.isB = 13;
          this.isC = 0;
          //message
          this.isA1 = 24,
            this.isB1 = 0
        }
        if (this.screenWidth > 1400) {
          this.isProject = true;
          this.isA = 5;
          this.isB = 12;
          this.isC = 7;
          //message
          this.isA1 = 10,
            this.isB1 = 14
        }
        return (() => {
          this.screenWidth = document.body.clientWidth;
          this.screenHeight = document.body.clientHeight;
        })();
      };
      this.updatesysstate();
    },
    methods: {
      showDrawer() {
        this.visible = true;
      },
      onClose() {
        this.visible = false;
      },
      increase() {
        let percent = this.percent + 10;
        if (percent > 100) {
          percent = 100;
        }
        this.percent = percent;
      },
      decline() {
        let percent = this.percent - 10;
        if (percent < 0) {
          percent = 0;
        }
        this.percent = percent;
      },
      updatesysstate() {
        var that = this;
        axios({
          method: 'get',
          url: '/apilog/querySystemInfo',
        }).then(function (res) {
          let arr = [];
          arr.push(parseInt(Number(res.data.result.mem_used) / 1024));
          let ratio = parseInt(Number(res.data.result.mem_used) / Number(res.data.result.mem_total) * 100);
          arr.push(ratio);
          that.valuex1 = arr;
          that.valuex2 = Number(res.data.result.process_count);
          that.valuex3 = Number(res.data.result.netstat_count);
          that.valuex4 = Number(res.data.result.thread_count);
        })
      },
    },
  };
</script>
<style scoped>
  h2 {
    textAlign: center;
    font-size: 2em;
  }

  .ant-carousel>>>.slick-slide {
    textAlign: center;
    color: black;
    height: 160px;
    line-height: 160px;
    background: #a0a3a4;
    overflow: hidden;
  }

  .ant-carousel>>>.slick-slide h3 {
    color: #fff;
  }

  .subcard {
    height: 135px;
    padding: 10px;
    margin: 15px;
    border-radius: 5px;
    /*四周都有阴影 0px 0px  8px 0px */
    /*靠右靠下有阴影 5px 2px 6px */
    box-shadow: 5px 2px 6px #d0d0d0;
  }

  .swiper1 {
    margin: 40px 50px;
  }
</style>